<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE Template</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root"><!--v-once-->
        <h1>{{msg}}</h1>
        <p>Using mustaches: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
        <div v-bind:id="dynamicID">dynamic id</div>
        <div>{{number+1}}</div>
        <div>{{isTrue?1:0}}</div>
        <div>{{msg.split('').reverse().join('')}}</div>
    </div>
</body>
    <script type="text/javascript">
        //不要在选项 property 或回调上使用箭头函数，
        //比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
        //因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，
        //经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
        const vm = new Vue({
            el:'#root',
            data:{
                msg:"hi, vue1",
                rawHtml:"<span style='color:red'>this should be red</span>",
                dynamicID:'blue',
                number:10,
                isTrue:false
            },
            beforeUpdate (){
                console.log('beforeUpdate');
            },
            updated() {
                console.log('updated');
            },
        })

        // setTimeout(() => {
        //     vm.msg = 'change...'
        // }, 3000);
    </script>
    <style type="text/css">
        #red{color:red}
        #blue{color:blue;font-size: 20px;}
    </style>
</html>